<template>
  <div class="likesearch">
    <div class="top">
      <SearchInput
        @onSearch="onSearch"
        v-model="word"
        placeholder="搜索收藏的商品名称"
        showBack
      />
      <span
        @click="isManage = !isManage"
        :class="isManage ? 'active manage' : 'manage'"
      >
        管理
        <van-icon name="cross" />
      </span>
    </div>
    <LoadList
      @next="getNextList"
      v-if="likeList.length"
      :load="listLoad"
      :finished="finished"
    >
      <ul class="list">
        <li v-for="item in likeList" :key="item.g_id">
          <div class="warpper cl">
            <div class="checkbox" v-show="isManage">
              <van-checkbox
                :value="getChecked(item.like_id)"
                @click="select(item.like_id)"
              />
            </div>
            <nuxt-link :to="item.g_id | goodsUrl" class="img">
              <img :src="item.g_src | formatSrc" :alt="item.g_name" />
            </nuxt-link>
            <div class="info">
              <nuxt-link :to="item.g_id | goodsUrl" class="title text-over2">
                {{ item.g_name }}
              </nuxt-link>
              <div class="num">{{ item.like_num }}人收藏</div>
              <div class="price" v-if="item.g_status === '正常'">
                <small>￥</small>{{ item.discounted_price || item.sell_price }}
              </div>
              <span class="lapse" v-else>已失效</span>
              <div class="btn" v-show="!isManage">
                <nuxt-link
                  v-show="item.g_status !== '正常'"
                  :to="{ name: 'store-id', params: { id: item.b_id } }"
                >
                  去店铺
                </nuxt-link>
                <nuxt-link
                  :to="{
                    name: 'all-goods',
                    query: { category_name: item.category_name }
                  }"
                >
                  找相似
                </nuxt-link>
              </div>
            </div>
          </div>
        </li>
      </ul>
    </LoadList>
    <GoodsEmpty
      v-else-if="isSearch && likeList.length === 0"
      img="like"
      title="暂无收藏商品"
    />
    <div class="fixed-bottom" v-show="isManage">
      <van-checkbox @click="changeAllChecked" :value="allChecked">
        {{ allChecked ? "取消" : "" }}全选
      </van-checkbox>
      <van-button type="danger" size="small" class="del" @click="del">
        删除
      </van-button>
    </div>
  </div>
</template>
<script>
export default {
  layout: "notabbar",
  data: () => ({
    word: null,
    isManage: false,
    listLoad: false,
    finished: true,
    likeList: [],
    checkedList: [],
    isSearch: false
  }),
  methods: {
    onSearch(val) {
      this.getList({ word: val });
    },
    getList(data, isConcat) {
      this.listLoad = true;
      this.finished = true;
      return new Promise((resolve, reject) => {
        const loading = this.$helperLoadding();
        this.$apiGetUserLike(data)
          .then(res => {
            const { page, pagesize, total, status, data } = res;
            if (status === 0) {
              this.page = page + 1;
              this.finished = page * pagesize >= total;
              if (isConcat) {
                this.likeList = this.likeList.concat(data);
                return;
              }
              this.likeList = data;
            }
          })
          .finally(() => {
            loading.close();
            this.listLoad = false;
            this.isSearch = true;
            resolve();
          });
      });
    },
    // 下一页
    getNextList() {
      const { word } = this;
      this.getList({ word }, true);
    },
    // 选中商品
    select(like_id) {
      let index = this.checkedList.findIndex(i => i === like_id);
      if (!~index) {
        return this.checkedList.push(like_id);
      }
      this.checkedList.splice(index, 1);
    },
    // 获取单个商品选中状态
    getChecked(like_id) {
      return this.checkedList.includes(like_id);
    },
    // 点击切换全选状态
    changeAllChecked() {
      let flag = this.allChecked;
      if (flag) {
        this.checkedList = [];
      } else {
        this.checkedList = this.likeList.map(i => i.like_id);
      }
    },
    del() {
      let len = this.checkedList.length;
      if (!len) {
        return this.$toast({ message: "你还未选择商品", type: "fail" });
      }
      this.$apiDelChooseLike({ like_id: this.checkedList }).then(res => {
        if (res.status === 0) {
          const { word } = this;
          this.getList({ word, page: 1 }).then(() => {
            this.checkedList = [];
          });
        }
      });
    }
  },
  computed: {
    allChecked() {
      if (this.likeList.length === 0) return false;
      return this.likeList.every(item => this.getChecked(item.like_id));
    }
  },
  watch: {
    word() {
      this.isSearch = false;
    }
  }
};
</script>

<style lang="scss" scoped src="./like.scss"></style>
<style lang="scss" scoped>
.top {
  display: flex;
  align-items: center;
  background: #fff;
  ::v-deep .van-field__control {
    border-color: #e9e9e9;
  }
  ::v-deep .search-input {
    background: #fff;
  }
  .manage {
    position: relative;
    margin-right: 15px;
    padding: 0 8px;
    line-height: 23px;
    border-radius: 10px;
    width: 60px;
    font-size: 12px;
    border: 1px solid #fff;
    color: #000;
    ::v-deep .van-icon {
      display: none;
    }

    &.active {
      border-color: #000;
      ::v-deep .van-icon {
        display: inline-block;
        vertical-align: middle;
      }
    }
  }
}
</style>
